import React from 'react';
import BraftEditor from 'braft-editor';
// 引入编辑器样式
import 'braft-editor/dist/index.css';
// 在展示页面引入css样板文件
import 'braft-editor/dist/output.css';
import { getOne } from '../services/article';

import { Form, Input, InputNumber, Button } from 'antd';


const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 22 },
};

const validateMessages = {
    required: 'This field is required!',
    types: {
        email: 'Not a validate email!',
        number: 'Not a validate number!',
    },
    number: {
        range: 'Must be between ${min} and ${max}',
    },
};

const onFinish = values => {
    console.log(values);
};


const htmlString = `<p>Hello <b>World!</b></p>`;
// 将HTML字符串转换为编辑器所需要的EditorState实例
// const editorState = BraftEditor.createEditorState(htmlString)

class ArticleEditPage extends React.Component {
    state = {
        id: this.props.match.params.id,
        info: {}
    }

    render() {
        let { info } = this.state;
        // 文章内容
        const editorState = BraftEditor.createEditorState(info.content);
        return (
            <div>
                <h3>{info.title}</h3>
                <hr />
                {/* <div className="braft-output-content" dangerouslySetInnerHTML={{ __html: htmlString }}></div> */}
                <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
                    <Form.Item colon={false} name={['info', 'title']} label="文章标题" rules={[{ required: true }]}>
                        <Input defaultValue={info.title} />
                    </Form.Item>
                    <Form.Item colon={false} name={['info', 'author']} label="作者" rules={[{ required: true }]}>
                        <Input defaultValue={info.author} />
                    </Form.Item>
                    <Form.Item colon={false} name={['info', 'hits']} label="点击量" rules={[{ type: 'number', min: 0, max: 999999, required: true }]}>
                        <InputNumber defaultValue={info.hits} />
                    </Form.Item>
                    <Form.Item colon={false} name={['info', 'description']} label="文章简介" rules={[{ required: true }]}>
                        <Input.TextArea defaultValue={info.description} />
                    </Form.Item>
                    <Form.Item colon={false} wrapperCol={{ ...layout.wrapperCol, offset: 2 }}>
                        <Button type="primary" htmlType="submit">
                            提交
        </Button>
                    </Form.Item>
                </Form>
                <BraftEditor value={editorState} />
            </div>
        );
    }

    componentWillMount() {
        this.getArticleInfo();
    }

    // 查询文章详情
    getArticleInfo() {
        const { id } = this.state;
        console.log(id, 'iddd');
        getOne(id).then(({ data }) => {
            // console.log(data);
            this.setState({ info: data.data });
        });
    }
}

ArticleEditPage.propTypes = {}

export default ArticleEditPage;